<template>
  <div class="calendar-view">
    <a-calendar v-if="showCalendar" :fullscreen="true" mode="month" @panelChange="panelChange">
      <ul slot="dateCellRender" slot-scope="value" class="events">
        <!-- 节假日 -->
        <li v-show="handleGetIsHoliday(value).name">
          <a-badge status="error" :text="handleGetIsHoliday(value).name" />
        </li>
        <!-- 去向 -->
        <li v-if="handleGetDestination(value).destination">
          <a-badge status="processing" :text="handleGetDestination(value).destination" />
        </li>
        <!-- 投稿 -->
        <li v-for="item in handleGetContribution(value)">
          <a-badge status="success" :text="item.title" />
        </li>
        <!-- 投稿 -->
        <!-- <li v-if="handleGetContribution(value).title">
          <a-badge status="success" :text="handleGetContribution(value).title" />
        </li> -->
      </ul>
    </a-calendar>
    <!-- 人名 -->
    <a-button class="top-left-user" type="primary" shape="round" icon="user" size="large" ghost>{{person_name}}
    </a-button>
  </div>
</template>

<script>
  const Holidays = require('date-holidays')
  import moment from 'moment'
  import {
    apiDestinationGetDestinationByPidAndDate,
    apiDestinationGetDestinationByPid,
    apiDestinationGetAllContributionByPid
  } from '@/api/featch'

  export default {
    components: {},
    data() {
      return {
        showCalendar: false,
        allDestination: [],
        allContribution: [],
        person_id: null,
        person_name: null,
        // 假期库
        hd: new Holidays(),
        moment,
      };
    },
    created() {
      // 初始化 假期库
      this.hd.init('CN')
      // 路由传参 姓名，id
      this.person_id = this.$route.query.person_id
      this.person_name = this.$route.query.person_name
      this.getAll()
    },
    methods: {
      getAll() {
        const p1 = apiDestinationGetDestinationByPid({
            person_id: this.person_id
          })
          .then(res => {
            if (res.code == 200) {
              this.allDestination = res.data
            }
          })

        const p2 = apiDestinationGetAllContributionByPid({
            person_id: this.person_id
          })
          .then(res => {
            if (res.code == 200) {
              this.allContribution = res.data
            }
          })

        Promise.all([p1, p2])
          .then(res => {
            this.showCalendar = true
          })
      },
      // 每个日期格子 调用 节假日
      handleGetIsHoliday(value) {
        const result = this.hd.isHoliday(new Date(value))
        if (result) {
          return result[0]
        } else {
          return {
            name: null
          }
        }
      },
      // 筛选每天的去向
      handleGetDestination(value) {
        let result = {}
        for (const item of this.allDestination) {
          if (moment(item.specific_date).format('YYYY-MM-DD') === moment(value).format('YYYY-MM-DD')) {
            result = item
            break
          }
        }
        return result
      },
      // 筛选每天的投稿
      handleGetContribution(value) {
        let result = []
        for (const item of this.allContribution) {
          if (moment(item.submission_date).format('YYYY-MM-DD') === moment(value).format('YYYY-MM-DD')) {
            result.push(item)
          }
        }
        return result
      },
      getPreviousAndNextMonthDates(month) {
        // 将输入的月份字符串转换为 moment 对象
        const currentMonth = moment(month, 'YYYY-MM');
        // 计算前一个月的第一天
        const firstDayOfPreviousMonth = currentMonth.clone().subtract(1, 'month').startOf('month').format('YYYY-MM-DD');
        // 计算后一个月的最后一天
        const lastDayOfNextMonth = currentMonth.clone().add(1, 'month').endOf('month').format('YYYY-MM-DD');
        return {
          firstDayOfPreviousMonth,
          lastDayOfNextMonth
        }
      },
      // 获取整个月的工作接口

      /**
       * 日期改变回调
       */
      panelChange(date, mode) {
        console.log(date.format('YYYY-MM'))
      }
    }
  }
</script>

<style lang="less" scoped>
  .calendar-view {
    position: relative;

    /deep/ .ant-radio-button-wrapper {
      display: none;
    }

    .events {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .top-left-user {
      position: absolute;
      top: 8px;
      left: 48px;
      font-weight: bold;
    }
  }
</style>